<template>
  <div class="layoutCon">
    <help-header :tab="3"></help-header>
    <div class="breadcrumb">
        <router-link class="home" to="/"></router-link> > <router-link to="/help">취업도우미</router-link> > 취업성공전략
    </div>
    <div class="helpList" v-loading="pageConfig.loading&&pageConfig.page==1">
      <ul v-if="list.length">
        <li v-for="(item,index) in list" :key="index">
          <router-link :to="`/help/matchingView?id=${item.id}`">
            <div class="pic video">
              <div class="img" v-if="item.image&&item.image.url" v-lazy:background-image="item.image.url"></div>
            </div>
            <div class="info">
              <!-- <label>취업성공전략</label> -->
              <strong>{{item.title}}</strong>
            </div>
            <div class="user">
              <span class="name">
                <!-- <img :src="item.user&&item.user.uthumb?item.user.uthumb:defaultAvatar2" :onerror="errorAvatar3">
                {{item.user&&item.user.name}} -->
              </span>
              <em>{{item.created_at}} 작성</em>
            </div>
          </router-link>
        </li>
      </ul>
      <div class="notData" v-if="!pageConfig.loading&&list.length==0">데이터 없음</div>
    </div>
    <div class="loadMore" v-if="!pageConfig.isAll">
      <el-button type="primary" :loading="pageConfig.loading" @click="loadMore" class="btnMore">더보기</el-button>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { getMatchingList } from '@/api';
import helpHeader from '@/components/helpHeader'

export default {
  name:'',
  components:{helpHeader},
  props:[],
  data(){
    return {
      pageConfig:{
        page:1,
        per:9,
        loading:true,
        isAll:true
      },
      list:[]
    }
  },
  computed:{
    ...mapState(['defaultAvatar2','errorAvatar3']),
  },
  created(){
    this.getList();
  },
  mounted(){},
  methods:{
    async getList(){
      this.pageConfig.loading=true;
      let res = await getMatchingList({page:this.pageConfig.page,per:this.pageConfig.per});
          if (res.code == 200) {
            this.pageConfig.page+=1;
            let _arry=res.data.data;
              if(_arry.length){
                _arry.forEach((o)=>{
                  o.isOpen=false;
                })
                this.list=this.list.concat(_arry);
              }
            !res.data.next_page_url?(this.pageConfig.isAll=true):(this.pageConfig.isAll=false);
            this.pageConfig.loading=false;
          }else{
            this.pageConfig.loading=false;
          }
    },
    loadMore(){
      !this.pageConfig.loading&&this.getList();
    }
  },
  watch:{}
}
</script>
<style lang="scss" scoped>
  @import "@/assets/styles/help.scss";
</style>
